<template>
  <div class="Attendance-container">
    <v-row class="ma-0 align-start main-wrap">
      <v-col class="pa-0 pr-2 treeGroup-wrap" :cols="4">
        <v-skeleton-loader
          v-if="loading"
          height="100%"
          type="list-item@20"
        ></v-skeleton-loader>
        <tree-group
          v-else
          :open.sync="openTeamIndex"
          v-model="selectedUser"
          :items="teamList"
        ></tree-group>
      </v-col>
      <v-col v-if="selectedUser" class="pa-0 map-wrap" :cols="8">
        <slot name="title">
          <div class="attendance-record-title">
            Attendance Record- Amy Chan - {{ selectedUser.userName }}
          </div>
        </slot>
        <div class="map-wrap-content">
          <iframe
            width="100%"
            height="100%"
            style="border: 0"
            loading="lazy"
            allowfullscreen
            referrerpolicy="no-referrer-when-downgrade"
            src="https://www.google.com/maps/embed/v1/place?key=API_KEY
              &q=Space+Needle,Seattle+WA"
          >
          </iframe>
          <v-expansion-panels class="map-search-panel" flat>
            <v-expansion-panel>
              <v-expansion-panel-header
                class="py-0 px-4 expansion-panel-header"
              >
                <template #actions>
                  <v-icon color="#fff">mdi-chevron-down</v-icon>
                </template>
                <v-row no-gutters>
                  <v-col class="label flex-grow-0 mr-4"> From </v-col>
                  <v-col class="mr-6" :cols="2">
                    <picker-input
                      class="picker-input"
                      solo
                      hide-details
                      format="DD/MM/YYYY"
                      v-model="fromDate"
                    ></picker-input>
                  </v-col>
                  <v-col class="label flex-grow-0 mr-4"> To </v-col>
                  <v-col :cols="2">
                    <picker-input
                      class="label picker-input flex-grow-0"
                      solo
                      hide-details
                      format="DD/MM/YYYY"
                      v-model="toDate"
                    ></picker-input>
                  </v-col>
                </v-row>
                <v-spacer></v-spacer>
                <v-icon
                  color="#fff"
                  class="float-right flex-grow-0 export-icon mr-2"
                  @click.stop="exportAttendanceRecord"
                  >mdi-file-export</v-icon
                >
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <Table
                  class="attendance-table elevation-0"
                  disable-sort
                  :rounded="false"
                  :headers="tableHeaders"
                  :items="tableDesserts"
                  hide-default-footer
                >
                </Table>
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </div>
      </v-col>
    </v-row>
    <Dialog
      v-model="showDialog"
      content-class="attendance-record-dialog"
      width="480"
      title="Export Attendance Record"
    >
      <template #headerAppend="{ close }">
        <v-icon class="icon" color="#fff" @click="close">mdi-close</v-icon>
      </template>
      <v-card class="py-9">
        <v-radio-group v-model="exportAttendanceRecordCondition" class="mt-0">
          <v-radio
            class="radio-input mb-6"
            color="#79839B"
            label="Chris Mok"
            value="Chris Mok"
          ></v-radio>
          <v-radio
            class="radio-input"
            color="#79839B"
            label="All Staff"
            value="All Staff"
          ></v-radio>
        </v-radio-group>
        <v-btn class="export-btn elevation-0" fab color="#EB9B31">
          <v-icon color="#fff" class="export-icon">mdi-file-export</v-icon>
        </v-btn>
      </v-card>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import TreeGroup from "@/components/Maintenance/Tree/TreeGroup.vue";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import PickerInput from "@/components/Maintenance/PickerInput/PickerInput.vue";
import { IMember, ITeam } from "@/components/Maintenance/index";
console.dir(Vue);
@Component({
  components: {
    TreeGroup,
    Table,
    PickerInput,
    Dialog,
  },
})
export default class Attendance extends Vue {
  showDialog = false;
  loading = false;
  // Team
  openTeamIndex: number[] = [];
  selectedUser: IMember | null = null;
  teamList: ITeam[] = [];
  getTeamList() {
    this.loading = true;
    setTimeout(() => {
      this.teamList = [
        {
          id: "1",
          team: "Admin",
          department: "ADM",
          peopleNum: 3,
          memberList: [
            {
              userId: "1",
              userName: "Angela Lo",
              shortName: "Angela",
              avatar:
                "https://cdn.pixabay.com/photo/2018/08/31/02/27/cat-3643705__340.jpg",
              email: "angelachan@yahoo.com",
              team: "Team 1",
              department: "ADM",
              password: "135246103",
              tel: "5023 2499",
              language: "English",
              head: "Amy Chan",
              status: "Active",
              userGroup: ["Customer Service Team", "Group 11"],
              colour: "",
              right: [
                "View all information",
                "Edit all reocrd",
                "Announcement",
              ],
              locationCode: {
                contact: ["1"],
                location: ["1"],
              },
              children: [
                {
                  userId: "2",
                  userName: "Ken Wong",
                  shortName: "Ken",
                  avatar:
                    "https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712__340.jpg",
                  email: "Kenwong@yahoo.com",
                  team: "Team 1",
                  department: "ADM",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "Chinese",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Group 11"],
                  colour: "",
                  right: ["View all information", "Announcement"],
                  locationCode: {
                    contact: ["1"],
                    location: [],
                  },
                },
                {
                  userId: "3",
                  userName: "Kin Fei To",
                  shortName: "Kin",
                  avatar:
                    "https://cdn.pixabay.com/photo/2015/10/30/20/13/boat-1014711__340.jpg",
                  email: "Kinfeiwonng@yahoo.com",
                  team: "Team 1",
                  department: "ADM",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Group 7", "Group 11"],
                  colour: "",
                  right: ["View all information"],
                  locationCode: {
                    contact: [],
                    location: ["1"],
                  },
                },
              ],
            },
          ],
        },
        {
          id: "2",
          team: "Customer Service Team",
          department: "CS",
          peopleNum: 4,
          memberList: [
            {
              userId: "4",
              userName: "Mark Wong",
              shortName: "MARK",
              avatar:
                "https://cdn.pixabay.com/photo/2013/07/25/01/31/forest-166733__340.jpg",
              email: "angelachan@yahoo.com",
              team: "Team 1",
              department: "CS",
              password: "135246103",
              tel: "5023 2499",
              language: "English",
              head: "Amy Chan",
              status: "Active",
              userGroup: ["Admin", "Group 11"],
              colour: "",
              right: ["Announcement"],
              locationCode: {
                contact: [],
                location: ["1"],
              },
              children: [
                {
                  userId: "5",
                  userName: "Amy Chan",
                  shortName: "AMY",
                  avatar:
                    "https://cdn.pixabay.com/photo/2022/10/19/01/02/woman-7531315__340.png",
                  email: "Kenwong@yahoo.com",
                  team: "Team 1",
                  department: "CS",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Field Service Engineer", "Project Team"],
                  colour: "",
                  right: ["Edit all reocrd"],
                  locationCode: {
                    contact: [],
                    location: [],
                  },
                },
                {
                  userId: "6",
                  userName: "Nicole Chan",
                  shortName: "Nicole",
                  avatar:
                    "https://cdn.pixabay.com/photo/2020/10/23/17/52/fox-5679446__340.png",
                  email: "Kinfeiwonng@yahoo.com",
                  team: "Team 1",
                  department: "CS",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Field Service Engineer", "Project Team"],
                  colour: "",
                  right: [],
                  locationCode: {
                    contact: ["1"],
                    location: [],
                  },
                },
                {
                  userId: "7",
                  userName: "Ace Tang",
                  shortName: "Ace",
                  avatar:
                    "https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683__340.png",
                  email: "wendytam @yahoo.com",
                  team: "Team 1",
                  department: "CS",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Field Service Engineer"],
                  colour: "",
                  right: ["View all information"],
                  locationCode: {
                    contact: ["1"],
                    location: [],
                  },
                },
              ],
            },
          ],
        },
        {
          id: "3",
          team: "Field Service Engineer",
          department: "FSE",
          peopleNum: 5,
          memberList: [
            {
              userId: "8",
              userName: "Eric Chou",
              shortName: "Eric",
              avatar:
                "https://cdn.pixabay.com/photo/2017/08/06/12/06/people-2591874__340.jpg",
              email: "ericko@yahoo.com",
              team: "Team 1",
              department: "FSE",
              password: "135246103",
              tel: "5023 2499",
              language: "English",
              head: "Amy Chan",
              status: "Active",
              userGroup: ["Field Service Engineer", "Project Team"],
              colour: "",
              right: ["Edit all reocrd", "Announcement"],
              locationCode: {
                contact: ["1"],
                location: ["1"],
              },
              children: [
                {
                  userId: "9",
                  userName: "Jackson Yee",
                  shortName: "Jackson",
                  avatar:
                    "https://cdn.pixabay.com/photo/2015/07/27/17/14/mountains-862870__340.jpg",
                  email: "jacksonyee@yahoo.com",
                  team: "Team 1",
                  department: "FSE",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Group 7", "Project Team"],
                  colour: "",
                  right: [],
                  locationCode: {
                    contact: ["1"],
                    location: [],
                  },
                },
                {
                  userId: "10",
                  userName: "Kenny Chan",
                  shortName: "Kenny",
                  avatar:
                    "https://cdn.pixabay.com/photo/2019/07/25/17/09/camp-4363073__340.png",
                  email: "kennychan@yahoo.com",
                  team: "Team 1",
                  department: "FSE",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Group 11", "Project Team"],
                  colour: "",
                  right: ["Edit all reocrd"],
                  locationCode: {
                    contact: [],
                    location: [],
                  },
                },
                {
                  userId: "11",
                  userName: "Marco Wong",
                  shortName: "Marco",
                  avatar:
                    "https://cdn.pixabay.com/photo/2018/01/10/23/53/rabbit-3075088__340.png",
                  email: "marcowong@yahoo.com",
                  team: "Team 1",
                  department: "FSE",
                  password: "135246103",
                  tel: "5023 2499",
                  language: "English",
                  head: "Amy Chan",
                  status: "Active",
                  userGroup: ["Group 11", "Admin"],
                  colour: "",
                  right: [],
                  locationCode: {
                    contact: ["1"],
                    location: ["1"],
                  },
                },
              ],
            },
          ],
        },
      ];
      // 打开所有team手风琴
      this.openTeamIndex = this.teamList.map((item, index) => index);
      // 设置默认选中的User
      this.setDefaultSelectedUser();
      this.loading = false;
    }, 800);
  }
  setDefaultSelectedUser() {
    if (this.teamList.length > 0 && this.teamList[0].memberList.length > 0) {
      this.selectedUser = this.teamList[0].memberList[0];
    }
  }
  // Attendance Record
  fromDate = "15/08/2022";
  toDate = "";
  // 导出出勤记录的
  exportAttendanceRecordCondition = "";
  tableHeaders = [
    {
      text: "Place",
      value: "place",
    },
    {
      text: "Time",
      value: "time",
    },
  ];
  tableDesserts = [
    {
      place:
        "Room 3208, 32/F, Cable TV Tower, 9 Hoi Shing Road, Tsuen Wan, N.T., Hong Kong",
      time: "2022-08-08 10:24 IN - 2022-08-08 17:25 OUT",
    },
    {
      place:
        "Room 3208, 32/F, Cable TV Tower, 9 Hoi Shing Road, Tsuen Wan, N.T., Hong Kong",
      time: "2022-08-12 11:15 IN - 2022-08-12 15:10 OUT",
    },
    {
      place:
        "Room 3208, 32/F, Cable TV Tower, 9 Hoi Shing Road, Tsuen Wan, N.T., Hong Kong",
      time: "2022-08-13 10:09 IN - 2022-08-13 15:25 OUT",
    },
    {
      place:
        "Room 3208, 32/F, Cable TV Tower, 9 Hoi Shing Road, Tsuen Wan, N.T., Hong Kong",
      time: "2022-08-15 09:15 IN - 2022-08-15 16:25 OUT",
    },
  ];

  exportAttendanceRecord() {
    this.showDialog = true;
  }

  created() {
    this.getTeamList();
  }

  mounted() {
    this.$store.commit("MaintenanceStore/switchActionIcon", "mdi-web");
  }
}
</script>

<style lang="scss" scoped>
@import "./Attendance.scss";
</style>
